<template>
    <div class="container">
        <FormSearch
            ref="formSearchRef"
            :FormParams="queryParams"
            :FormRules="searchFormRules"
            :FormShow="showSearch"
            @submit="getList"
            @refresh="getList" />
        <el-row class="mb20">
            <el-col :span="20">
                <el-button type="primary" @click="addNewHandler">新增</el-button>
            </el-col>
            <el-col :span="4">
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
            </el-col>
        </el-row>
        <TableBate
            id="tableBateId"
            ref="tableRef"
            :loading="loading"
            :TableHead="tableHead"
            :TableData="tableData"
            :TableAttrs="tableAttrs"
            @handleActionBarEvent="handleActionBarEvent">
            <template #name="{ row }">
                <span>{{ row.touristList.map((item) => item.name).join('、') }}</span>
            </template>
            <template #status="{ row, index }">
                <el-switch
                    v-model="row.status"
                    :loading="switchLoading"
                    @change="changeStatusHandler($event, row, index)"
                    :active-value="0"
                    :inactive-value="1" />
            </template>
        </TableBate>
        <pagination
            id="pagination"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNumber"
            v-model:limit="queryParams.pageSize"
            @pagination="getList" />
        <!-- 弹框 -->
        <AccountDialog ref="accountDialogRef" @uploadTable="initTableData"></AccountDialog>

        <ChangePasswordForm ref="changePasswordForm" @cancelHandler="handleCancelHandler" />
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs, getCurrentInstance } from 'vue'
import FormSearch from '@/components/FormSearch/index.jsx'
import { getPageApi, deleteByIdApi, modifyStatusByIdApi, resetPasswordApi } from '@/api/system/account'
import AccountDialog from './components/AccountDialog'
import TableBate from '@/components/Table_Bate/index.jsx'
import { ElMessageBox, ElMessage } from 'element-plus'
import { formatDate } from '@/utils/date'
import { tableHead, searchFormRules } from './config'
import ChangePasswordForm from './components/ChangePasswordForm.vue'

const formatDateStr = (data, isDue) => formatDate(data, isDue)

const { proxy } = getCurrentInstance()
onMounted(() => {
    getList()
})
const tableData = ref([])
const total = ref(0)
const changePasswordForm = ref()
const tableRef = ref()
const loading = ref(false)
const switchLoading = ref(false)
// 右侧工具栏是否显示
const showSearch = ref(true)

const data = reactive({
    queryParams: {
        pageNumber: 1,
        pageSize: 10,
        status: 1,
        name: null,
    },
    tableAttrs: {
        size: 'large',
        align: 'center',
    },
})

const { queryParams, tableAttrs } = toRefs(data)

const handleActionBarEvent = async (row, type) => {
    if (type === '修改') {
        await editRowHandler(row)
    }

    if (type === '默认密码') {
        resetPasswordRowHandler(row)
    }

    if (type === '删除') {
        deleteRowHandler(row)
    }
}

const getList = () => {
    loading.value = true
    getPageApi(queryParams.value).then(({ result }) => {
        tableData.value = result.data || []
        total.value = result.total ?? 0
        loading.value = false
    })
}
const changePageHandler = ({ page, limit }) => {
    pageSizeRef.value = limit
    pageNumberRef.value = page
    getList()
}

const accountDialogRef = ref(null)
// 新增操作
const addNewHandler = async () => {
    accountDialogRef.value.openDialog()
}
// 编辑操作
const editRowHandler = async (rowData) => {
    accountDialogRef.value.openDialog(rowData)
}
// 修改密码
// const handleChangePassword = (row) => {
//     changePasswordForm.value.openDialog(row)
// }
const handleCancelHandler = () => {
    getList()
}
// 修改状态
const changeStatusHandler = async (value, row, index) => {
    switchLoading.value = true
    ElMessageBox.confirm(`确认要修改用户名为${row.username}的状态?`, '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            modifyStatusByIdApi(row.id).then((res) => {
                tableData.value[index].status = value
                ElMessage({
                    type: 'success',
                    message: '修改成功',
                })
                switchLoading.value = false
            })
        })
        .catch(() => {
            tableData.value[index].status = value === 1 ? 0 : 1
            ElMessage({
                type: 'info',
                message: `取消删除`,
            })
            switchLoading.value = false
        })
}

const resetPasswordRowHandler = (row) => {
    ElMessageBox.confirm('确定要重置密码', '重置密码提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await resetPasswordApi(row.id)
        ElMessage.success('重置密码成功')
        getList()
    })
}
// 删除操作
const deleteRowHandler = (row) => {
    ElMessageBox.confirm('确定要删除', '删除提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await deleteByIdApi(row.id)
        ElMessage.success('删除成功')
        getList()
    })
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
    box-sizing: border-box;
}
</style>
